<template>
    <div>
        <inner-breadcrumb
            v-model="key"
            :path="{
            label: this.$t('minor.culturePlan.culturePlanManagerTitle'),
            key: 'culturePlanManagerList',
            children:[
                {
                    key: 'customPlan',
                    label:this.$t('minor.culturePlan.customPlanBtn'),
                    children:[
                        {
                            key: 'viewCulture1',
                            label:this.$t('minor.culturePlan.viewCulture')
                        },
                    ]
                },
                {
                    key: 'viewPlan',
                    label:this.$t('minor.culturePlan.viewPlanBtn'),
                    children:[
                        {
                            key: 'viewCulture',
                            label:this.$t('minor.culturePlan.viewCulture')
                        },
                    ]
                }
            ]
        }"
        />
        <plan-manager-list
            v-if="key=='culturePlanManagerList'"
            @custom-plan="customPlan"
            @view-plan="customPlan"
        />
        <custom-plan
            :studentId="studentId"
            :isShow="isShow"
            :entranceTerm="entranceTerm"
            @goBack="key='culturePlanManagerList'"
            v-if="key=='customPlan'||key=='viewPlan'"
            ref="customPlan"
            @catCulture="catCulture"
        />
        <chapter-set
            v-if="key=='viewCulture'||key=='viewCulture1'"
            :isEdit="false"
            :templateId="templateId"
            :type="type"
        />
    </div>
</template>
<script>
import { queryDic } from "common/src/api/dictionary";
import UTILS from "common/src/utils/utils";
import { queryCourseTypeList } from "common/src/api/minor/minorCulturePlanManager";
import CustomPlan from "../component/CustomPlan";
import PlanManagerList from "../component/PlanManagerList";
import ChapterSet from "../component/ChapterSet";
export default {
    data() {
        return {
            templateId: "",
            entranceTerm: "",
            type: 2,
            isShow: true,
            studentId: "",
            key: "culturePlanManagerList",
            indeterminate: true,
            selectAllChk: false,
            dialogTitle: "",
            payDialogTitle: "",
            courseListData: {
                list: []
            },
            payCaseArr: [
                { label: "未缴费", value: 0 },
                { label: "已缴费", value: 1 }
            ],
            courseLableData: [],
            spanArr: [],
            position: 0,
            courseDetail: {
                courseCode: "",
                courseName: "",
                weeks: "",
                weekSchoolHour: "",
                period: "",
                credits: "",
                trainingLevel: "",
                briefIntroduction: ""
            },
            payCourseList: []
        };
    },
    components: { CustomPlan, PlanManagerList, ChapterSet },
    created() {},
    mounted() {
        if (!this.$checkMinor()) return;
        //初始化个人培养计划数据
        this.initCuturePlanData();
    },
    methods: {
        catCulture({ id, flag, type = 2 }) {
            this.templateId = id;
            this.type = 2;
            if (flag) {
                this.key = "viewCulture1";
            } else {
                this.key = "viewCulture";
            }
        },
        renderHeader(h, { column, $index }) {
            //设置表头为checkbox
            return h(
                "el-checkbox",
                {
                    class: {
                        checkedAll: true
                    },
                    props: {
                        indeterminate: this.indeterminate,
                        value: this.selectAllFlag
                    },
                    on: {
                        change: this.selectAllClick
                    }
                },
                [""]
            );
        },
        //全选
        selectAllClick() {
            this.indeterminate = false;
            if (!this.selectAllFlag && this.allFlagAfter) {
                this.selectAllFlag = true;
                this.payCourseList.forEach((val, index) => {
                    //将显示复选框的都选中，即status等于0的做选中
                    if (val.status === 0) {
                        //设置复选框选中
                        val.checked = true;
                    }
                });
            } else {
                if (!this.allFlagAfter) {
                    this.selectAllFlag = true;
                    this.allFlagAfter = true;
                } else {
                    // 点击取消
                    this.selectAllFlag = false;
                }
            }
        },
        initCuturePlanData() {
            if (!this.$checkMinor()) return;
            this.courseListData.list = [];
            this.rowspan();
        },
        rowspan() {
            this.courseListData.list.forEach((item, index) => {
                if (index === 0) {
                    this.spanArr.push(1);
                    this.position = 0;
                } else {
                    if (
                        this.courseListData.list[index].courseTypeId ==
                        this.courseListData.list[index - 1].courseTypeId
                    ) {
                        this.spanArr[this.position] += 1;
                        this.spanArr.push(0);
                    } else {
                        this.spanArr.push(1);
                        this.position = index;
                    }
                }
            });
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            //表格合并行
            if (columnIndex === 0) {
                const _row = this.spanArr[rowIndex];
                const _col = _row > 0 ? 1 : 0;
                return {
                    rowspan: _row,
                    colspan: _col
                };
            }
        },
        rowStyle({ row, rowIndex }) {
            return "height:40px;";
        },
        rowClass({ row, rowIndex }) {
            return "height:40px;";
        },
        //点击筛选查询数据
        searchData() {
            console.log(this.queryParams);
            let query = this.queryParams;
            //调用查询列表的方法
        },
        customPlan(studentId, entranceTerm, flag, key) {
            //自定义计划
            this.isShow = flag;
            this.key = "customPlan";
            this.studentId = studentId;
            this.entranceTerm = entranceTerm;
            this.key = key;
        },
        makePlan() {
            //制定计划
            this.dialogTitle = "培养计划制定";
            this.$refs.addDialog.open();
        },
        cancelSelectForm() {
            this.$refs.addDialog.close();
        },
        submitSelectForm() {
            this.$refs.addDialog.close();
        },
        closeDetailDialog() {
            this.$refs.courseDetailDialog.close();
        },
        aboutPay() {
            this.payDialogTitle = "关于缴费";
            this.$refs.signDialog.open();
        },
        closeSignDialog() {
            this.$refs.signDialog.close();
        },
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = "总计";
                    return;
                }
                if (column.property == "credit" || column.property == "weeks") {
                    const values = data.map(item =>
                        Number(item[column.property])
                    );
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                    } else {
                        sums[index] = "";
                    }
                } else {
                    sums[index] = "";
                }
            });

            return sums;
        },
        getPushLable(payStatus) {
            const payCase = this.payCaseArr.find(t => t.value == payStatus);
            if (payCase === "{}") {
                return value;
            } else {
                return payCase.label;
            }
        },
        viewCourse(row) {
            this.courseDetail = {
                courseCode: row.courseCoe,
                courseName: row.courseName,
                weeks: row.weeks,
                weekSchoolHour: "1",
                period: "25",
                credits: row.weeks,
                trainingLevel: "本科",
                briefIntroduction:
                    "同济大学计算机科学与技术学科始建于1978年，是全国高等院校中建立计算机学科较早的学校之一。"
            };
            this.$refs.courseDetailDialog.open();
        },
        openPayCourseList() {
            //打开缴费窗口
            this.$refs.payCourseDialog.open();
        },
        closePayCourseDialog() {
            //关闭缴费窗口
            this.$refs.payCourseDialog.close();
        }
    }
};
</script>
<style scoped>
.first_title {
    font-size: 20px;
    font-family: "微软雅黑";
    color: #666666;
    padding: 0px 0px 16px;
}
.btn {
    text-align: right;
    padding: 0px 0px 16px;
}
.headPortrait {
    width: 40px;
    height: 40px;
    border-radius: 28px;
    float: left;
}
.span_style {
    float: left;
    line-height: 40px;
    margin: 0 0 0 15px;
    font-size: 13px;
    font-family: "微软雅黑";
    font-weight: 600;
}
.basic_div {
    height: 50px;
}
.line_div {
    border: 1px solid #f1f1f1;
    margin: 0 0 20px 0;
}
.title_left {
    float: left;
}
.title_right {
    float: right;
}
.font_style {
    color: #3a7fe8;
}
.title_right a {
    margin: 0 0 0 10.1px;
}
.two_title {
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #2b3b4e;
    letter-spacing: 0;
    line-height: 20px;
    font-weight: 800;
}
.parent_div {
    height: 32px;
}
.two_line_div {
    border: 1px solid #e7e8e8;
    margin: 8px 0 24px 0;
}
.table_style tr,
td {
    border: 1px solid #e7e8e8;
}
</style>
<style lang="scss">
.table_style {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    min-height: 39px;
    line-height: 39px;
    font-family: PingFangSC-Medium;
    font-size: 14px;
    color: #4c5c70;
    letter-spacing: 0;
    table-layout: fixed;
}
</style>
